<template>
  <!-- 好生活资金池-列表-搜索表单 -->
  <div class="searchForm">
    <el-form :model="typeForm" :inline="true">
      <el-form-item label="开发商：" prop="companyName">
        <el-input v-model.trim="typeForm.companyName" autocomplete="off" placeholder="请输入开发商"></el-input>
      </el-form-item>
      <!-- <el-form-item label="业绩归属：" prop="broker">
        <el-input v-model.trim="typeForm.broker" autocomplete="off" placeholder="请输入姓名/手机号"></el-input>
      </el-form-item>-->
      <el-form-item
        :prop="prop"
        :label="itemLabel+'：'"
        v-for="({itemLabel,model,prop,option,placeholder,label,value},idx) in selectInfos"
        :key="idx"
      >
        <el-select
          v-model="typeForm[prop]"
          :placeholder="placeholder"
          @change="selectChange(prop,typeForm[prop])"
          :disabled="!alloption[option].length"
          :filterable="true"
        >
          <el-option label="全部" value></el-option>
          <el-option
            v-for="(item,index) in alloption[option]"
            :key="index"
            :label="item[label]"
            :value="item[value]"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="客户：" prop="customer">
        <el-input v-model.trim="typeForm.customer" autocomplete="off" placeholder="请输入姓名/手机号"></el-input>
      </el-form-item>
      <!-- <el-form-item label="成交时间：">
        <el-date-picker
          v-model="formTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>-->
      <el-form-item label="认购时间：">
        <el-date-picker
          v-model="subscriptionTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="签约时间：">
        <el-date-picker
          v-model="signingTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="提交时间：">
        <el-date-picker
          v-model="submitTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$emit('searchList',1)" id="monitorEnter">查询</el-button>
        <el-button type="primary" :disabled="isExportDis" @click="$emit('exportList')">导出</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/apiPath";
import utils from "@/common/utils.js";
export default {
  data() {
    return {
      formTime: [], //成绩时间
      subscriptionTime: [], //认购时间
      signingTime: [], //签约时间
      submitTime: [], //提交时间
      alloption: {
        cityIdOp: [],
        projectOp: [],
        devOp: [],
        brokerOp: [
          { label: "网络推客", value: 0 },
          { label: "渠道", value: 3 },
          { label: "客户自然到访", value: -1 }
        ],
        buildOp: [],
        unitOp: [],
        floorOp: [],
        cellOp: []
      },
      selectInfos: [
        {
          itemLabel: "城市",
          prop: "cityId",
          option: "cityIdOp",
          placeholder: "请选择城市",
          label: "city",
          value: "cityId"
        },
        {
          itemLabel: "项目",
          prop: "projectId",
          option: "projectOp",
          placeholder: "请选择项目",
          label: "projectName",
          value: "estateProjectId"
        },
        {
          itemLabel: "楼盘",
          prop: "devId",
          option: "devOp",
          placeholder: "请选择楼盘",
          label: "devName",
          value: "devId"
        },
        {
          itemLabel: "业绩归属",
          prop: "brokerType",
          option: "brokerOp",
          placeholder: "请选择业绩归属",
          label: "label",
          value: "value"
        },
        {
          itemLabel: "楼栋",
          prop: "buildId",
          option: "buildOp",
          placeholder: "请选择楼栋",
          label: "buildName",
          value: "buildId"
        },
        {
          itemLabel: "单元",
          prop: "unit",
          option: "unitOp",
          placeholder: "请选择单元",
          label: "unitName",
          value: "unit"
        },
        {
          itemLabel: "楼层",
          prop: "floor",
          option: "floorOp",
          placeholder: "请选择楼层",
          label: "floorName",
          value: "floor"
        },
        {
          itemLabel: "房号",
          prop: "cellId",
          option: "cellOp",
          placeholder: "请选择房号",
          label: "cellName",
          value: "id"
        }
      ]
    };
  },
  created() {
    this.getCity();
    // this.getProject();
    // this.getDev()
  },
  props: ["typeForm"],
  computed: {
    isExportDis() {
      //检测所有表单值是否有值
      let vals = Object.values(this.typeForm).filter(v => v !== "");
      return !vals.length;
    }
  },
  watch: {
    // formTime(val){
    //   this.formatTime('formTime',val)
    // },
    subscriptionTime(val) {
      this.formatTime("subscriptionTime", val);
    },
    signingTime(val) {
      this.formatTime("signingTime", val);
    },
    submitTime(val) {
      this.formatTime("submitTime", val);
    }
  },
  mounted() {},
  methods: {
    formatTime(label, val) {
      let labelMap = {
        // formTime:['beginTime','endTime'],
        subscriptionTime: ["purchaseTimeBeginTime", "purchaseTimeEndTime"], //认购时间
        signingTime: ["signTimeBeginTime", "signTimeEndTime"], //签约时间
        submitTime: ["purchaseCreateTimeBeginTime", "purchaseCreateTimeEndTime"] //提交时间
      };
      val = val && val.length ? val : [];
      let [startLabel, endLabel] = labelMap[label];
      let [startTime = "", endTime = ""] = val;

      this.typeForm[startLabel] = startTime
        ? utils.getTimeString(startTime).slice(0, 10)
        : "";
      this.typeForm[endLabel] = endTime
        ? utils.getTimeString(endTime).slice(0, 10)
        : "";
    },
    selectChange(prop, val) {
      let { cityId, projectId, devId, buildId, unit, floor } = this.typeForm;
      let changeFunMap = {
        cityId: () => this.getProject(cityId),
        projectId: () => this.getDev(projectId),
        devId: () => this.getBuild(devId),
        buildId: () => this.getUnit(devId, buildId),
        unit: () => this.getFloor(devId, buildId, unit),
        floor: () => this.getCell(devId, buildId, unit, floor)
      };
      changeFunMap[prop] && changeFunMap[prop]();
    },
    //获取楼盘
    getDev(projectId) {
      this.typeForm.devId = "";
      this.alloption.devOp = [];
      this.getBuild();
      if (!arguments[0]) return;
      this.axios
        .post(api.getSaleList, { estateProjectId: projectId })
        .then(res => {
          if (res.data.code == 200) {
            this.alloption.devOp = res.data.data;
          }
        });
    },
    //获取楼栋
    getBuild(devId) {
      this.typeForm.buildId = "";
      this.alloption.buildOp = [];
      this.getUnit();
      if (!arguments[0]) return;
      this.axios.post(api.getDevList, { devId: devId }).then(res => {
        if (res.data.code == 200) {
          this.alloption.buildOp = res.data.data;
        }
      });
    },
    //获取单元 unit
    getUnit(devId, buildingId) {
      this.typeForm.unit = "";
      this.alloption.unitOp = [];
      this.getFloor();
      if (!arguments[0]) return;
      this.axios
        .post(api.getDevInfosList, {
          devId: devId,
          buildingId: buildingId,
          type: "unit"
        })
        .then(res => {
          if (res.data.code == 200) {
            this.alloption.unitOp = res.data.data;
          }
        });
    },
    //获取楼层 floor
    getFloor(devId, buildingId, unitId) {
      this.typeForm.floor = "";
      this.alloption.floorOp = [];
      this.getCell();
      if (!arguments[0]) return;
      this.axios
        .post(api.getDevInfosList, {
          devId: devId,
          buildingId: buildingId,
          unitId: unitId,
          type: "floor"
        })
        .then(res => {
          if (res.data.code == 200) {
            this.alloption.floorOp = res.data.data;
          }
        });
    },
    //获取房号 cellName
    getCell(devId, buildingId, unitId, floorId) {
      this.typeForm.cellId = "";
      this.alloption.cellOp = [];
      if (!arguments[0]) return;
      this.axios
        .post(api.getDevInfosList, {
          devId: devId,
          buildingId: buildingId,
          unitId: unitId,
          floorId: floorId,
          type: "cellName"
        })
        .then(res => {
          if (res.data.code == 200) {
            this.alloption.cellOp = res.data.data;
          }
        });
    },
    getProject(cityId) {
      this.typeForm.projectId = "";
      this.alloption.projectOp = [];
      this.getDev();
      if (!arguments[0]) return;
      this.axios.post(api.getProjectList, { cityId: cityId }).then(res => {
        if (res.data.code == 200) {
          this.alloption.projectOp = res.data.data;
        }
      });
    },
    //获取城市
    getCity() {
      this.typeForm.cityId = "";
      this.alloption.cityIdOp = [];
      this.axios.post(api.CITYLIST).then(res => {
        if (res.data.code == 200) {
          this.alloption.cityIdOp = res.data.data.cityList;
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
